<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            p {
                display: flex;
                align-items: center;
            }
            #colorInfo {
                display: inline-block;
                width: 45px;
                height: 16px;
                border-radius: 2px;
            }
            #colorInfo.red {
                background-color: red;
            }
            #colorInfo.blue {
                background-color: blue;
            }
        </style>
    </head>
    <body>
        选择颜色:
        <select id="colorSelect">
            <option value="">请选择</option>
            <option value="red">红色</option>
            <option value="blue">蓝色</option>
        </select>
        选择内存:
        <select id="memorySelect">
            <option value="">请选择</option>
            <option value="32G">32G</option>
            <option value="16G">16G</option>
        </select>
        输入购买数量: <input type="number" id="numberInput"/><br />
        <p>
            您选择了颜色:&nbsp;<span id="colorInfo"></span>
        </p>
        <p>
            您选择了内存:&nbsp;<span id="memoryInfo"></span>
        </p>
        <p>
            您输入了数量:&nbsp;<span id="numberInfo"></span>
        </p>
        <button id="nextBtn" disabled="true">请选择手机颜色和购买数量</button>
    </body>
    <script src="./goods.js"></script>
</html>
